<template>
    <div class="container">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="form.realName"
              name="realName"
              label="孩子姓名"
              placeholder="请输入孩子姓名"
              :rules="[{ required: true, message: '请输入孩子姓名' }]"
            />
            <!-- <van-field
              v-model="form.cardId"
              name="cardId"
              label="身份证号"
              placeholder="请输入身份证号"
              maxlength="18"
            /> -->
            <van-field
              v-model="sexValue"
              is-link
              readonly
              label="性别"
              placeholder="请选择性别"
              @click="showPicker1 = true"
              :rules="[{ required: true, message: '请选择性别' }]"
            />
            <van-popup v-model:show="showPicker1" round position="bottom">
              <van-picker
                v-model="selectedValues1"
                :columns="sexList"
                @cancel="showPicker1 = false"
                @confirm="onConfirm1"
              />
            </van-popup>
            <van-field
              v-model="schValue"
              is-link
              readonly
              label="学校"
              placeholder="请选择学校"
              @click="showPicker2 = true"
              :rules="[{ required: true, message: '请选择学校' }]"
            />
            <van-popup v-model:show="showPicker2" round position="bottom">
              <van-cascader
                v-model="selectedValues2"
                title="请选择所在学校"
                :options="schoolList"
                @close="showPicker2 = false"
                @finish="onFinish"
              />
            </van-popup>
            <van-field
              v-model="schGradeValue"
              is-link
              readonly
              label="年级"
              placeholder="请选择年级"
              @click="showPicker3 = true"
              :rules="[{ required: true, message: '请选择年级' }]"
            />
            <van-popup v-model:show="showPicker3" round position="bottom">
              <van-picker
                v-model="selectedValues3"
                :columns="schGradeList"
                @cancel="showPicker3 = false"
                @confirm="onConfirm3"
              />
            </van-popup>

            <van-field
              v-model="schClassValue"
              is-link
              readonly
              label="班级"
              placeholder="请选择班级"
              @click="showPicker4 = true"
              :rules="[{ required: true, message: '请选择班级' }]"
            />
            <van-popup v-model:show="showPicker4" round position="bottom">
              <van-picker
                v-model="selectedValues4"
                :columns="schClassList"
                @cancel="showPicker4 = false"
                @confirm="onConfirm4"
              />
            </van-popup>
             <van-field
              v-model="relationTypeValue"
              is-link
              readonly
              label="关系"
              placeholder="请选择关系"
              @click="showPicker5 = true"
              :rules="[{ required: true, message: '请选择关系' }]"
            />
            <van-popup v-model:show="showPicker5" round position="bottom">
              <van-picker
                v-model="selectedValues5"
                :columns="relationTypeList"
                @cancel="showPicker5 = false"
                @confirm="onConfirm5"
              />
            </van-popup>
          </van-cell-group>
          <div class="addbtn">
            <van-button round block type="primary" native-type="submit">
              确认
            </van-button>
          </div>
        </van-form>

    </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue'
import { showToast } from 'vant';
import { getDictionary,addChildren,getSchool,studentInfo,editChildren } from '@/api/personalCenter';
import { localStorage } from '@/utils/local-storage';
const router = useRouter()
const form = reactive({
  realName: '',
  cardId: '',
})

const parentId = ref('')
parentId.value = localStorage.get('parentId')
const onSubmit = () => {
  let { realName, cardId } = form;
  const params = {
    realName: realName,
    cardId: cardId,
    parentId: parentId.value,
    relationType: relationTypeId.value,
    sex: sexId.value,
    sch: schId.value,
    schGrade: schGradeId.value,
    schClass: schClassId.value,
    studentId: router.currentRoute.value.query.id
  }
  editChildren(params).then((res) => {
    if (res.code === 200) {
      showToast(res.msg)
      router.push({ path: '/childrenInfo', query: { status: 'homeinto' }});
    } else {
      showToast(res.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
}

const schoolList = ref([])
const showPicker2 = ref(false);
const selectedValues2 = ref('');
const schValue = ref('')
const schId = ref('')
 const onFinish = ({ selectedOptions }) => {
    showPicker2.value = false;
    // schValue.value = selectedOptions.map((option) => option.text).join('/');
    schValue.value = selectedOptions[1].text;
    schId.value = selectedOptions[1].value;
};


const getSchoolList = ()=>{
  getSchool().then((res) => {
    if (res.code === 200) {
      schoolList.value = res.data
    } else {
      showToast(res.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
}

const sexList = []
const showPicker1 = ref(false);
const selectedValues1 = ref('');
const sexValue = ref('')
const sexId = ref('')
const onConfirm1 = ({ selectedOptions }) => {
  showPicker1.value = false;
  sexValue.value = selectedOptions[0]?.text;
  sexId.value = selectedOptions[0]?.value;
};
const getSexList = ()=>{
  getDictionary('963255a34ea64a2584c5d1ba269c1fe6').then(res => {
    res.data.list.forEach((item)=>{
      sexList.push({
        text: item.fullName,
        value: item.enCode,
      })
    })
  })
}

//年级
const schGradeList = []
const showPicker3 = ref(false);
const selectedValues3 = ref(['']);
const schGradeValue = ref('')
const schGradeId = ref('')
const onConfirm3 = ({ selectedOptions }) => {
  showPicker3.value = false;
  schGradeValue.value = selectedOptions[0]?.text;
  schGradeId.value = selectedOptions[0]?.value;
};
const getschGradeList = ()=>{
  getDictionary('548064163449012805').then(res => {
    res.data.list.forEach((item)=>{
      schGradeList.push({
        text: item.fullName,
        value: item.enCode
      })
    })
  })
}

//班级
const schClassList = []
const showPicker4 = ref(false);
const selectedValues4 = ref(['']);
const schClassValue = ref('')
const schClassId = ref('')
const onConfirm4 = ({ selectedOptions }) => {
  showPicker4.value = false;
  schClassValue.value = selectedOptions[0]?.text;
  schClassId.value = selectedOptions[0]?.value;
};
const getschClassList = ()=>{
  getDictionary('548116876736070213').then(res => {
    res.data.list.forEach((item)=>{
      schClassList.push({
        text: item.fullName,
        value: item.enCode
      })
    })
  })
}

//关系
const relationTypeList = []
const showPicker5 = ref(false);
const selectedValues5 = ref(['']);
const relationTypeValue = ref('')
const relationTypeId = ref('')
const onConfirm5 = ({ selectedOptions }) => {
  showPicker5.value = false;
  relationTypeValue.value = selectedOptions[0]?.text;
  relationTypeId.value = selectedOptions[0]?.value;
};
const getrelationTypeList = ()=>{
  getDictionary('548050786425242181').then(res => {
    res.data.list.forEach((item)=>{
      relationTypeList.push({
        text: item.fullName,
        value: item.enCode
      })
    })
  })
}


//获取该子女的信息详情
const getDetail = () => {
  studentInfo(router.currentRoute.value.query.id).then((res) => {
  if (res.code === 200) {
    form.realName = res.data.realName
    form.cardId = res.data.cardId
    schId.value = res.data.sch
    schClassId.value = res.data.schClass
    sexId.value = res.data.sex
    schGradeId.value = res.data.schGrade
    // console.log('sexList111:::',sexList);
    //选择框数据回显
    let picksex = []
    picksex = sexList.filter(s =>{
      return s.value == sexId.value
    })
    sexValue.value = picksex[0].text

    // let picksch = []
    // picksch = schoolList.filter(s =>{
    //   return s.value == schId.value
    // })
    // console.log('picksch:',picksch);
    // schValue.value = picksch[0].text


    let pickschGrade = []
    pickschGrade = schGradeList.filter(s =>{
      return s.value == schGradeId.value
    })
    schGradeValue.value = pickschGrade[0].text

    let pickschClass = {}
    pickschClass = schClassList.filter(s =>{
      return s.value == schClassId.value
    })
    schClassValue.value = pickschClass[0].text

    // let pickrelationType = {}
    // console.log('relationTypeList:', relationTypeList);
    // pickrelationType = relationTypeList.filter(s =>{
    //   return s.value == relationTypeId.value
    // })
    // console.log('pickrelationType:',pickrelationType);
    // relationTypeValue.value = pickrelationType[0].text

  } else {
    showToast(res.msg)
  }
}).catch((err) => {
  console.log(err)
})
}




onMounted(() => {
  getSchoolList()
  getSexList()
  getschGradeList()
  getschClassList()
  getrelationTypeList()
  getDetail()
})
</script>
 

<style lang="scss" scoped>
.container {
  background: #f9f9f9;
  overflow: hidden;
  margin-bottom: 45px;
}
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
}
.addbtn{
  position: fixed;
  bottom: 1rem;
  width: 92%;
  left: 4%;
}
.van-form{
  background: #fff;
}
</style>